import React, { useState, useEffect, useMemo } from 'react';
import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
import { SatelliteSystems } from './configs/satellite.config.js';
import { useRealtimeContext } from './RealtimeContext';

function RealtimeCheckboxGroup({ satelliteType = "BDS" }) {
    // 删除原有的satelliteCount定义
    const options = useMemo(() => {
        // 获取当前卫星类型的配置
        const satelliteConfig = SatelliteSystems[satelliteType]?.count || {};

        // 过滤出配置为true的卫星编号，并生成选项
        return Object.entries(satelliteConfig)
            .filter(([_, isActive]) => isActive)
            .map(([satelliteId]) => ({
                label: `${satelliteType} ${satelliteId}${String(satelliteId).length === 1 ? '\u00A0\u00A0' : ''}`,
                value: satelliteId
            }));
    }, [satelliteType]);

    const allValues = useMemo(() => options.map(option => option.value), [options]);
    const { checkedStates, updateCheckedList } = useRealtimeContext();
    const [indeterminate, setIndeterminate] = useState(false);
    const [checkAll, setCheckAll] = useState(false);
    const [checkedList, setCheckedList] = useState(checkedStates[satelliteType] || []);

    // 同步上下文状态到本地
    useEffect(() => {
        setCheckedList(checkedStates[satelliteType] || []);
    }, [checkedStates, satelliteType]);

    // 更新全选和半选状态
    useEffect(() => {
        setIndeterminate(!!checkedList.length && checkedList.length < allValues.length);
        setCheckAll(checkedList.length === allValues.length);
    }, [checkedList, allValues]);

    if (satelliteType === "default") {
        return <></>;
    }

    const onChange = (checkedValues) => {
        setCheckedList(checkedValues);
        updateCheckedList(satelliteType, checkedValues);
    };

    const onCheckAllChange = (e) => {
        const { checked } = e.target;
        const newList = checked ? allValues : [];
        setCheckedList(newList);
        updateCheckedList(satelliteType, newList);
    };

    return (
        <div style={
            {
                background: 'rgba(var(--semi-grey-0), 1)',
            }
        }>
            <div style={{
                position: 'sticky',
                top: 0,
                zIndex: 1,
                padding: '8px 16px',
                background: 'rgba(var(--semi-grey-1), 1)',
                marginBottom: 8,
            }}>
                <Checkbox
                    indeterminate={indeterminate}
                    onChange={onCheckAllChange}
                    checked={checkAll}
                >
                    {satelliteType} 全选
                </Checkbox>
            </div>
            <div style={{
                padding: '0px 16px 8px 16px',
            }}>
                <CheckboxGroup
                    direction="horizontal"
                    options={options}
                    value={checkedList}
                    onChange={onChange}
                />
            </div>
        </div>
    );
}

export default RealtimeCheckboxGroup;
